<template>
	<view class="list_box">
		<view class="list_ss">
			<view class="header_list">
				<image src="https://p1.music.126.net/6_34Jf5YfizBLptYV8-h0g==/3397490930328962.jpg?param=200y200"
					mode=""></image>
				<view class="header_word">
					<h4>{{listData.list_name}}</h4>
					<view class="name_si">
						<image
							:src="listData.list_headUrl"
							mode=""></image>
						<span>{{listData.username}}</span>
					</view>
				</view>
			</view>
			<view class="info_list">
				{{listData.list_introduce}}
			</view>
			<view class="icons_like">
				<span>
					<uni-icons type="redo-filled" size="30" color="#fff"></uni-icons>
					<span>66</span>
				</span>
				<span>
					<uni-icons type="chat-filled" size="30" color="#fff"></uni-icons>
					<span>66</span>
				</span>
				<span>
					<uni-icons type="folder-add-filled" size="30" color="#fff"></uni-icons>
					<span>66</span>
				</span>
			</view>
		</view>
		<view class="list_song">
			<view class="play_btn">
				<view class="paly_btn_left">
					<uni-icons type="headphones" size="30" color="red"></uni-icons>
					<h4 style="margin-left: 25rpx;">播放全部</h4>
					<span style="color: rgba(0,0,0,.5);margin-left: 20rpx;">(255)</span>
				</view>
				<view class="play_bth_right">
					<uni-icons type="download" size="20" color="black"></uni-icons>
					<uni-icons type="bars" size="20" color="black" class="mores_song"></uni-icons>
				</view>
			</view>
			<view class="songs">
				<view class="song" v-for="(item,index) in songData" :key="item.song_id" @click="playsongFn(`${item.song_id}`)">
					<span>{{index+1}}</span>
					<view class="song_name">
						<h4>{{item.songName}}</h4>
						<span>{{item.singer}}</span>
					</view>
					<uni-icons type="more-filled" size="20" color='rgba(0,0,0,.5)' class="more_list"></uni-icons>
				</view>
				
			</view>
		</view>
		<playMusic v-if="mid" :songId="songId" :key="songId" class="list_play"/>
	</view>
</template>

<script lang="ts">
	import playMusic from '@/components/playMusic.vue';
	export default {
		data() {
			return {
				list_id: '',
				listData:{'list_name':'','list_introduce':'','list_headUrl':'','username':''},
				songData:null,
				mid:false,
				songId:""
			};
		},
		components: { playMusic },
		onLoad: function (option : any) { //option为object类型，会序列化上个页面传递的参数
			this.list_id = (option.list_id as string);
			this.getListData(this.list_id)
		},		
		methods:{
			getListData(id:string){
				uni.request({
					url:'api/listInfo',
					data:{
						list_id:id
					},
					success:(res:any)=> {
						this.listData=res.data.list[0];
						this.songData=res.data.list_song;
					},
					fail:(error)=> {
						console.log(error);
					}
				})
			},
			playsongFn(song_id:any){
				this.mid = true;
				this.songId = song_id;
				console.log(song_id);
			}
		}
	}
</script>

<style lang="scss">
	.list_box {
		background-color: rgba(220, 0, 0, .3);

		.list_ss {

			padding-bottom: 40rpx;

			.header_list {

				display: flex;

				>image {
					width: 150rpx;
					height: 150rpx;
					margin: 25rpx;
					border-radius: 15rpx;

				}

				.header_word {
					color: white;
					margin: 25rpx 0;

					>h4 {
						font-size: 16px;
					}

					.name_si {
						display: flex;
						align-items: center;
						color: rgba(255, 255, 255, .6);
						font-weight: 700;
						margin-top: 10rpx;

						image {
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							margin-right: 20rpx;


						}


					}

				}
			}

			.info_list {
				color: rgba(255, 255, 255, .6);
				font-size: 12rpx;
				margin-left: 25rpx;
			}

			.icons_like {
				margin: 20rpx 25rpx;

				>span {
					display: inline-block;
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					border-radius: 35rpx;
					text-align: center;
					background-color: rgba(244, 244, 244, .1);
					margin: 0 10rpx;

					>span {
						color: #fff;
						display: inline-block;
						transform: translateY(-10rpx);
					}

				}
			}
		}

		.list_song {
			// height: 150rpx;
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;

			.play_btn {
				display: flex;
				justify-content: space-between;
				padding: 40rpx 25rpx;
				text-align: center;

				.paly_btn_left {
					display: flex;
				}

				.play_bth_right {
					.mores_song {
						margin-left: 30rpx;
					}
				}
			}

			.songs {
				
				.song {
					display: flex;
					margin: 30rpx 25rpx;
					align-items: center;
					>span{
						display: inline-block;
						width: 50rpx;
						
					}
						
					.song_name{
						width: 600rpx;
						>h4{
							font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
							
						}
						>span{
							font-size: 12rpx;
						}
					}
					.more_list{
						transform: rotateZ(90deg);
					}
				}
			}
		}
		.list_play{
			margin-top: 93rpx;
		}

	}
</style>